<template>
  <el-button
    @click="()=>{
      data.push({
        name: '邮储按钮'+ (data.length + 1),
        icon: '',
      });          
    }"
  >
    添加按钮
  </el-button>
  <el-table :data="data" style="width: 100%" size="small">
    <el-table-column prop="name" label="按钮名称" width="120">
      <template #default="scope">
        <div v-if="!scope.row._edit">
          {{ scope.row.name }}
        </div>
        <el-input v-else v-model="scope.row.name" @blur="saveEdit(scope.row, 'name')" />
      </template>
    </el-table-column>
    <el-table-column prop="icon" label="图标class" width="120">
      <template #default="scope">
        <div v-if="!scope.row._edit">
          {{ scope.row.fn }}
        </div>
        <el-input v-else v-model="scope.row.fn" @blur="saveEdit(scope.row, 'icon')" />
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="150">
      <template #default="scope">
        <el-button v-if="!scope.row._edit" @click="()=>{scope.row._edit = true;}">编辑</el-button>
        <el-button v-else @click="()=>{scope.row._edit = false;}">保存</el-button>
        <el-button type="danger" @click="()=>{data.splice(scope.$index,1);}">删除</el-button>
      </template>
    </el-table-column>          
  </el-table>   
</template>

<script setup lang="ts">
import {defineOptions,ref,defineProps,watch,defineEmits,reactive} from 'vue'
// import TagAdd from './tagAdd.vue'
defineOptions({ name: 'IFInput' });
const emit = defineEmits(['update:modelValue','customChange'])

const props = defineProps({
    modelValue:{
        type:Array,
        default:()=>[]
    }
})
const data = reactive(props.modelValue)
const saveEdit = () => {

}
</script>

<style scoped lang="scss">
// @import './index.scss';
</style>
